@import "../../../assets/styles/mixins";

.search {
  display: flex;
  height: 60px;

  svg path {
    fill: #fff;
  }

  input {
    border: none;
    padding: 5px 16px;
    width: 100%;
    -webkit-appearance: none;
    transition: width .4s ease-in-out;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: .3px;
    background: #fff;
    color: #666;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    
    &::placeholder {
      color: #666;
    }

    &:focus {
      box-shadow: none;
      border: none;
      outline: none;
    }
  }

  button {
    border: none;
    padding: 5px 15px;
    font-size: 14px;
    line-height: 24px;
    background: #06A5FF;
    width: 60px;
    cursor: pointer;

    &:hover {
      background: lighten(#06A5FF, 5%);
    }

    &:focus {
      box-shadow: none;
      border: none;
      outline: none;
    }
  }
}

:host-context(body.dark) {
  .search {

    button {
      background: #7500f5;

      &:hover {
        background: lighten(#7500f5, 5%);
      }
    }

    input {
      background: #2d224d;
      color: #fff;
      @include respond-to(small) {
        border-right: none;
      }
      &::placeholder {
        color: #fff;
      }
    }
  }
}